  <!-- 交易中的订单 -->
  <template>
    <div class="main-body">
      <header class="main-body-search">
        <el-form :model="search" @submit.native.prevent>
          <el-row :gutter="50" type="flex" justify="space-between">
            <el-col :span="12">
              <!-- <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">我要订单</el-button> -->
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-form-item label class="nja-form-line">
                <el-input
                  style="width: 350px;"
                  v-model.trim="search.keyword"
                  placeholder="订单编号、买家手机号"
                  clearable
                  @keyup.enter.native="searchHandle"
                >
                  <div
                    slot="prefix"
                    style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;"
                  >
                    <i class="el-icon-search"></i>
                  </div>
                  <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </header>
      <el-main class="main-body-table">
        <div class="table-shadow"></div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          height="calc(100vh - 250px)"
        >
          <el-table-column type="index" label="#" width="60px" align="center"></el-table-column>
          <el-table-column prop="orderTime" label="下单时间" align="center" min-width="150"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" align="center" min-width="80"></el-table-column>
          <el-table-column prop="customerId" label="买家" align="center" min-width="150"></el-table-column>
        
          <el-table-column
            prop="orderPhone"
            label="订单电话"
            show-overflow-tooltip
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="orderAddress"
            label="订单地址"
            show-overflow-tooltip
            align="left"
            min-width="180"
          ></el-table-column>
          <el-table-column prop="totalAmount" label="金额" align="center" min-width="100"></el-table-column>
          <el-table-column prop="orderPickUpTime" label="订单取货时间" align="center" min-width="140"></el-table-column>
          <el-table-column prop="status" label="状态" align="center" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status == '待处理' ? 'warning' : 'info'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="100px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showDetail(scope.row)" plain>查看</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <!--工具条-->
        <el-pagination
          background
          class="main-body-table-page"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page="search.current"
          :page-size="search.size"
          :total="search.total"
        ></el-pagination>
      </el-main>
      <el-dialog
        title="查看订单"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        center
        v-dialogDrag
        custom-class="mydialog"
        width="900px"
      >
        <el-form
          ref="form"
          class="formlayout"
          :model="form"
          label-width="120px"
          label-position="right"
        >
          <el-descriptions title :column="2">
            <el-descriptions-item label="订单类型">
              <el-tag>{{ form.orderType }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="订单时间">{{ form.orderTime }}</el-descriptions-item>
            <el-descriptions-item
              label="订单取货时间"
              v-if="form.orderPickUpTime"
            >{{ form.orderPickUpTime }}</el-descriptions-item>
            <el-descriptions-item label="定点取货点" v-if="form.addressPoint">{{ form.addressPoint }}</el-descriptions-item>
            <el-descriptions-item label="订单人">{{ form.orderPerson }}</el-descriptions-item>
            <el-descriptions-item label="订单人电话">{{ form.orderPhone }}</el-descriptions-item>
            <el-descriptions-item label="配送费用" v-if="form.deliveryFee">
              ￥
              <span class="price">{{ form.deliveryFee }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="订单总金额">
              ￥
              <span class="price">{{ form.totalAmount }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title :column="2">
            <el-descriptions-item label="订单地址" :span="2">{{ form.orderAddress }}</el-descriptions-item>
            <el-descriptions-item label="订单备注" :span="2">{{ form.remarks }}</el-descriptions-item>
          </el-descriptions>
          <el-table
            :data="form.orderItems"
            stripe
            height="300px"
            header-row-class-name="liststyle2"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="productName" label="商品">
              <template slot-scope="scope">
                <el-image class="list-img" v-if="scope.row.image" :src="scope.row.image">
                  <div slot="error" class="image-slot">暂无</div>
                </el-image>
                <el-image v-else class="list-img">
                  <div slot="error" class="image-slot">暂无</div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品"></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
            <el-table-column prop="unitPrice" label="单价" align="center"></el-table-column>
            <el-table-column prop="totalPrice" label="总价" align="center"></el-table-column>
          </el-table>
          <div v-if="form && form.orderItems">总共{{form.orderItems.length}}种商品，共{{totalNum}}件</div>
        </el-form>
      </el-dialog>
    </div>
  </template>
      
      <script>
  import {
    SelectPageFinish,
    SelectList,
    DeleteHandle,
    UpdateHandle
  } from '@/api/shop/order'
  export default {
    data() {
      return {
        visible: false,
        dialogVisible: false,
        search: {
          current: 1,
          size: 20,
          total: 0,
          keyword: ''
        },
        form: {
          id: '',
          name: '',
          longitude: '',
          latitude: ''
        },
        multipleSelection: [],
        tableData: []
      }
    },
    computed: {
      totalNum() {
        if (this.form && this.form.orderItems) {
          return this.form.orderItems.reduce((a, b) => {
            a += b.quantity
            return a
          }, 0)
        }
        return 0
      }
    },
    methods: {
      changeMap([lng, lat, address]) {
        this.form.longitude = lng
        this.form.latitude = lat
        this.form.address = address
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      finishOrder(row, type) {
        // 完成订单
        let msg = `确定${type == '已完成' ? '完成订单' : '订单发货'}吗？`
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UpdateHandle({ orderId: row.orderId, status: type }).then((res) => {
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.loadData()
            }
          })
        })
      },
      showDetail(row) {
        this.form = Object.assign(
          {
            orderItems: []
          },
          row
        )
        this.dialogVisible = true
        this.loadOrderItems()
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      loadOrderItems() {
        SelectList({
          orderId: this.form.orderId
        }).then((res) => {
          this.form.orderItems = res.data.map((d) => {
            d.image = `${this.$store.getters.baseApi}/open-api/product/img?refId=${d.productId}`
            return d
          })
        })
      },
      saveHandle() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 保存
            let params = Object.assign({}, this.form)
            delete params.lastUpdateTime
            delete params.createTime
            params.status = '已处理'
            UpdateHandle(params).then(async (res) => {
              console.log('RegisterRequest', res)
              if (res.code === 20000) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.dialogVisible = false
                this.loadData()
              }
            })
          }
        })
      },
      deleteRow(row) {
        console.log(row)
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DeleteHandle({ id: row.id }).then((res) => {
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.loadData()
            }
          })
        })
      },
      handleCurrentChange(val) {
        this.search.current = val
        this.loadData()
      },
      searchHandle() {
        this.search.current = 1
        this.loadData()
      },
      loadData() {
        let params = Object.assign({}, this.search)
        SelectPageFinish(params)
          .then((res) => {
            console.log('SelectPageFinish:', res)
            this.tableData = res.data.records
            this.search.total = res.data.total
          })
          .catch((err) => {
            console.log('err:', err)
          })
      }
    },
    mounted() {
      this.loadData()
    }
  }
  </script>
      
      <style lang="scss" scoped>
  .tableimg {
    width: 45px;
  }
  .formlayout {
    padding: 20px 40px;
  }
  
  $imgwidth: 100px;
  
  .face-img {
    position: relative;
    height: $imgwidth;
    width: $imgwidth;
    background-color: #f1f2f3;
    // border: 1px solid #eee;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  
    .hiddle {
      visibility: hidden;
    }
    .avatar-uploader {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      height: $imgwidth;
      width: $imgwidth;
      &:hover {
        .avatar-uploader-icon {
          background-color: rgba(200, 200, 200, 0.5);
        }
        .hiddle {
          visibility: visible;
        }
      }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      font-size: 28px;
      color: #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 30px;
      }
    }
  
    .avatar {
      height: $imgwidth;
      width: $imgwidth;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .list-img {
    height: 50px;
    width: 50px;
    line-height: 50px;
    border: 1px solid #f1f2f3;
  }
  .price {
    font-size: 20px;
    font-weight: 700;
  }
  </style>
      